<<<<<<< HEAD
import React, { useState } from 'react';
import '../css/index.scss';
import { Swiper, Toast } from 'antd-mobile'
import ProCode from './ProCode'
import { useNavigate } from 'react-router-dom';

const Index = () => {
    sessionStorage.setItem('userId', '66683381833a7da049fc885e')
    let nav=useNavigate()
    const banner_imgs = ['./imgs/1.png', './imgs/2.png', './imgs/3.png', './imgs/4.png', './imgs/5.png']
    const types_list = [
        {
            _id: 1,
            pic: './imgs/type1.png',
            title: '蔬菜豆制品',
            bgcolor: '#edf7e8',
            width: '55px'
        },
        {
            _id: 2,
            pic: './imgs/type2.png',
            title: '肉禽类',
            bgcolor: '#fff4f4',
            width: '50px'
        },
        {
            _id: 3,
            pic: './imgs/type3.png',
            title: '水产海鲜',
            bgcolor: '#f4f4fe',
            width: '50px'
        },
        {
            _id: 4,
            pic: './imgs/type4.png',
            title: '水果鲜花',
            bgcolor: '#fef6f4',
            width: '50px'
        },
        {
            _id: 5,
            pic: './imgs/type5.png',
            title: '素食冻品',
            bgcolor: '#fbf3ed',
            width: '50px'
        },
        {
            _id: 6,
            pic: './imgs/type6.png',
            title: '粮油调味',
            bgcolor: '#fcf7e9',
            width: '42px'
        },
        {
            _id: 7,
            pic: './imgs/type7.png',
            title: '酒水饮料',
            bgcolor: '#fcf7e9',
            width: '45px'
        },
        {
            _id: 8,
            pic: './imgs/type8.png',
            title: '熟食卤味',
            bgcolor: '#fcebe9',
            width: '50px'
        },
    ]
=======
import React, { useEffect, useState, useRef } from 'react';
import '../css/index.scss';
import { Swiper, Toast } from 'antd-mobile'
import ProCode from './ProCode'
import { FireFill, BellOutline, EnvironmentOutline,DownFill } from 'antd-mobile-icons'
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { CountDown } from '@nutui/nutui-react'
const partItemStyle = {
    flexShrink: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: '22px',
    height: '18px',
    background: '#e8220e',
    color: '#fff',
    fontSize: '12px',
    borderRadius: '3px',
}
const partItemSymbolStyle = {
    margin: '2px 3px',
}
const Index = () => {

    const onUpdate = (v) => {
        setResetTime(v)
    }
    const [resetTime, setResetTime] = useState({
        d: '1',
        h: '00',
        m: '00',
        s: '00',
    })
    const stateRef = useRef({
        endTime: Date.now() + 60 * 60 * 60 * 1000 * 2,
    })

    const navigate = useNavigate()
    const banner_imgs = ['./imgs/1.png', './imgs/2.png', './imgs/3.png', './imgs/4.png', './imgs/5.png']
    const [types_list, setTypes_list] = useState([])
    const [goods, setGoods] = useState([])
>>>>>>> origin/jiayuting
    const activity_list = [
        {
            _id: 1,
            title: '休闲食品',
            content: '爆品直降',
            pic: './imgs/activity1.png'
        },
        {
            _id: 2,
            title: '饼干蛋糕',
            content: '满66减20',
            pic: './imgs/activity2.png'
        },
        {
            _id: 3,
            title: '速食冲剂',
            content: '满88减48',
            pic: './imgs/activity3.png'
        },
        {
            _id: 4,
            title: '米面杂粮',
            content: '低至2件8折',
            pic: './imgs/activity4.png'
        },
    ]
    const item = banner_imgs.map((item, i) => (
        <Swiper.Item key={i}>
            <img
                className='content'
                onClick={() => {
                    Toast.show('你点击了' + i)
                }}
                src={item}
                alt=''
            >
            </img>
        </Swiper.Item>
    ))
<<<<<<< HEAD
=======
    const getTypes = async () => {
        let { data } = await axios.get('http://localhost:3000/limengxi/getcate')
        if (data.code === 200) {
            setTypes_list(data.data)
        }
    }
    const getGoods = async () => {
        let { data } = await axios.get('http://localhost:3000/jiayuting/getgoods')
        if (data.code === 200) {
            setGoods(data.list)
        }
    }
    useEffect(() => {
        getTypes()
        getGoods()
    }, [])
>>>>>>> origin/jiayuting
    return (
        <div className='home_box'>
            <div className='home_header'>
                <div className='home_header_address'>
<<<<<<< HEAD
                    <span>保定莲池区</span>
                    <span>保</span>
=======
                    <span><EnvironmentOutline /> 保定莲池区 <DownFill /></span>
                    <span><BellOutline fontSize='18px' /></span>
>>>>>>> origin/jiayuting
                </div>
                <div className='home_header_search'>
                    <input placeholder='当季蔬菜'></input>
                </div>
            </div>
            <div className='home_body'>
                <div className='home_banner'>
                    <div className='home_banner_bg'></div>
                    <div className='home_search_hot'>
                        <span className='home_search_item'>宅家烧烤</span>
                        <span className='home_search_item'>早餐面包</span>
                        <span className='home_search_item'>小龙虾</span>
                        <span className='home_search_item'>方便净菜</span>
                    </div>
                    <div className='home_banner_demo'>
                        <Swiper
                            loop
                            autoplay
                            onIndexChange={i => {
                                console.log(i, 'onIndexChange1')
                            }}
                        >
                            {item}
                        </Swiper>
                    </div>
                </div>
                <div className='home_types'>
                    <div className='home_types_list'>
                        {
<<<<<<< HEAD
                            types_list.map(item => (
                                <div className='home_types_item' key={item._id}>
                                    <div className='img_bg' style={{ backgroundColor: `${item.bgcolor}` }}><img src={item.pic} alt='' width={item.width}></img></div>
                                    <p>{item.title}</p>
=======
                            types_list.map((item,i) => (
                                <div className='home_types_item' key={item._id} onClick={() => { navigate(`/type?id=${i}`); }}>
                                    <div className='img_bg' style={{ backgroundColor: `${item.bgcolor}` }}><img src={item.img} alt='' width={item.width}></img></div>
                                    <p>{item.name}</p>
>>>>>>> origin/jiayuting
                                </div>
                            ))
                        }
                    </div>
                </div>
                <div className='home_adv'>
                    <img src='./imgs/logo111.png' alt='' width='95%'></img>
                </div>
                <div className='home_activity'>
                    <div className='home_activity_box'>
<<<<<<< HEAD
                        <div className='item'>
                            <div className=''></div>
=======
                        <div className='item' onClick={() => { navigate('/miaosha') }}>
                            <div className='item_head'>
                                <h4>限时秒杀</h4>
                                <span>
                                    <CountDown endTime={stateRef.current.endTime} onUpdate={onUpdate}>
                                        <div
                                            className="countdown-part-box"
                                            style={{ display: 'flex', alignItems: 'center' }}
                                        >
                                            <div className="part-item h" style={partItemStyle}>
                                                {resetTime.h}
                                            </div>
                                            <span className="part-item-symbol" style={partItemSymbolStyle}>
                                                :
                                            </span>
                                            <div className="part-item m" style={partItemStyle}>
                                                {resetTime.m}
                                            </div>
                                            <span className="part-item-symbol" style={partItemSymbolStyle}>
                                                :
                                            </span>
                                            <div className="part-item s" style={partItemStyle}>
                                                {resetTime.s}
                                            </div>
                                        </div>
                                    </CountDown>
                                </span>
                            </div>
                            <div className='item_title'>
                                <p>每日低价促销</p>
                            </div>
                            <div className='item_body'>
                                <div className='item_body_box'>
                                    <img src='./imgs/pro1.png' alt='' width='75px'></img>
                                    <p><span className='xian'>￥69</span><span className='qian'>￥89.9</span></p>
                                </div>
                                <div className='item_body_box'>
                                    <img src='./imgs/pro2.png' alt='' width='75px'></img>
                                    <p><span className='xian'>￥69</span><span className='qian'>￥89.9</span></p>
                                </div>
                            </div>
                        </div>
                        <div className='item'>
                            <div className='item_head'>
                                <h4>好物直播</h4>
                                <span className='jx'>精选商品</span>
                            </div>
                            <div className='item_title'>
                                <p>互动赢好礼</p>
                            </div>
                            <div className='item_body'>
                                <div className='item_body_box'>
                                    <img src='./imgs/pro3.png' alt='' width='75px'></img>
                                    <p><FireFill color='rgb(255, 153, 37)' /><span className='num'>200人</span></p>
                                </div>
                                <div className='item_body_box'>
                                    <img src='./imgs/pro4.png' alt='' width='75px'></img>
                                    <p><FireFill color='rgb(255, 153, 37)' /><span className='num'>20.2w人</span></p>
                                </div>
                            </div>
                        </div>
                        <div className='item'>
                            <div className='item_head'>
                                <h4>热销榜单</h4>
                            </div>
                            <div className='item_title'>
                                <p>大家都喜欢的</p>
                            </div>
                            <div className='item_body'>
                                <div className='item_body_box'>
                                    <img src='./imgs/pro5.png' alt='' width='75px'></img>
                                </div>
                                <div className='item_body_box'>
                                    <img src='./imgs/pro6.png' alt='' width='75px'></img>
                                </div>
                            </div>
                        </div>
                        <div className='item'>
                            <div className='item_head'>
                                <h4>新品上架</h4>
                            </div>
                            <div className='item_title'>
                                <p>买就送100元豪礼</p>
                            </div>
                            <div className='item_body'>
                                <div className='item_body_box'>
                                    <img src='./imgs/pro7.png' alt='' width='75px'></img>
                                </div>
                                <div className='item_body_box'>
                                    <img src='./imgs/pro8.png' alt='' width='75px'></img>
                                </div>
                            </div>
>>>>>>> origin/jiayuting
                        </div>
                    </div>
                </div>
                <div className='home_adv1'>
                    <img src='./imgs/logo222.png' alt='' width='95%'></img>
                </div>
                <div className='home_activity1'>
                    <p className='top'>活动专区</p>
                    <div className='home_activity1_box'>
                        {
                            activity_list.map(item => (
                                <div className='home_activity1_item' key={item._id}>
                                    <div className='home_activity1_item_left'>
                                        <h4 className='title'>{item.title}</h4>
                                        <p className='con'>{item.content}</p>
<<<<<<< HEAD
                                        <span className='say' onClick={()=>{nav('/specialEvent?cate='+item.title)}}>立即查看</span>
=======
                                        <span className='say'>立即查看</span>
>>>>>>> origin/jiayuting
                                    </div>
                                    <div className='home_activity1_item_right'>
                                        <img src={item.pic} alt=''></img>
                                    </div>
                                </div>
                            ))
                        }
                    </div>
<<<<<<< HEAD

=======
>>>>>>> origin/jiayuting
                </div>
                <div className='home_hot'>
                    <p className='hot'><span className='span'>—— </span><span className='hot_main'>热销商品</span><span className='span'> ——</span></p>
                    <div className='prolist'>
<<<<<<< HEAD
                        <ProCode></ProCode>
                        <ProCode></ProCode>
                        <ProCode></ProCode>
                        <ProCode></ProCode>
                        <ProCode></ProCode>
                        <ProCode></ProCode>
                        <ProCode></ProCode>
                        <ProCode></ProCode>
=======
                        {
                            goods.map(item => (
                                <ProCode key={item._id} img={item.img} desc={item.desc} name={item.name} price={item.price}></ProCode>
                            ))
                        }
>>>>>>> origin/jiayuting
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Index;
